<template>
  <div class="approval-product">
    <div class="approval-product__item" v-for="item in list" @click="checkProduct(item)">
      <div class="approval-product__img" v-bind:style="{backgroundImage: 'url(' + item.icon + ')'}"></div>
      <div class="approval-product__body">
        <div class="approval-product__name">
          {{item.name}}
        </div>
        <div class="approval-product__sell">
          销量:{{item.sales}}
        </div>
        <div class="approval-product__sell">
          进货价:￥{{item.price}}&nbsp;指导价:￥{{item.advicePrice}}
        </div>
      </div>
      <div class="approval-product__chk">
        <van-checkbox v-model="item.checked"></van-checkbox>
      </div>
    </div>
    <div class="approval-product__btn">
      <van-button type="primary" @click="showSetting">提交审核</van-button>
    </div>
    <van-dialog v-model="dialogShow" title="设置销售价" show-cancel-button @confirm="submitApproval">
      <div class="approval-setting-tip">温馨提示：未填写默认按商家指导价设置</div>
      <div class="approval-setting">
        <van-cell-group>
          <van-field v-for="(item, index) in list" v-if="item.checked" :key="index" v-model="item.sellPrice" clearable :placeholder="'指导价：' + item.advicePrice + '元'" :label="item.name + ':'"  />
        </van-cell-group>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import {
    PRODUCT_APPROVAL_LIST,
    PRODUCT_ADD_APPROVAL
  } from '@/api/product';
  export default {
    computed: {
      ...mapState(['stationInfo'])
    },
    data() {
      return {
        checked: true,
        list: [],
        dialogShow: false
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        this.$reqPost(PRODUCT_APPROVAL_LIST, new URLSearchParams({
          stationId: this.stationInfo.id
        })).then(res => {
          res.rows.forEach(element => {
            element.checked = false;
            element.sellPrice = '';
          });
          this.list = res.rows;
        })
      },
      checkProduct(item) {
        item.checked = !item.checked;
      },
      //提交审核
      submitApproval() {
        let list = this.list.filter(el => {
          return el.checked;
        });
        if (list.length !== 0) {
          let params = [];
          list.forEach(el => {
            params.push({
              stationId: this.stationInfo.id,
              waterId: el.id,
              price: el.sellPrice !== '' ? el.sellPrice : el.advicePrice
            })
          })
          this.$reqPost(PRODUCT_ADD_APPROVAL, params).then(res => {
            if (res.data) {
              this.$toast('提交成功');
              this.getData();
              setTimeout(() => {
                // 第一次申请提交后去爬楼
                if (!localStorage.getItem('goPalou')) {
                  this.$dialog.confirm({
                    title: '提示',
                    message: '是否前往添加爬楼费？若不配置爬楼费，用户下单将不支付爬楼费。'
                  }).then(() => {
                    // on confirm
                    this.$router.replace({
                      path: '/palouAdd',
                      query: {
                        palou: 1
                      }
                    })
                  }).catch(() => {
                    // on cancel
                  });
                }
                localStorage.setItem('goPalou', 1)
              }, 500)
            } else {
              this.$toast('提交失败');
            }
          });
        } else {
          this.$toast('请选择商品')
        }
      },
      //设置销售价
      showSetting(){
        let list = this.list.filter(el => {
          return el.checked;
        });
        if (list.length !== 0) {
          this.dialogShow = true;
        }else{
          this.$toast('请选择商品')
        }
      }
    }
  }

</script>

<style lang="less" scoped>
  .approval-product__item {
    display: flex;
    background: #ffffff;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;

    .approval-product__img {
      margin-right: 10px;
      border-radius: 5px;
      flex: 0 0 60px;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url('../../assets/product.png');
      background-position: center;
    }

    .approval-product__body {
      flex: 1;

      .approval-product__sell {
        margin-top: 5px;
        color: #999;
        font-size: 12px;
      }
    }

    .approval-product__chk {
      display: flex;
      align-items: center;
    }
  }

  .approval-product__btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;

    button {
      width: 100%;
    }
  }

  .approval-setting{
    max-height: 70vh;
    overflow: auto;
  }
  .approval-setting-tip{
    font-size: 12px;
    color: #999;
    padding: 10px;
  }
  

</style>
